<template>
	<view class="bed-order">
		<Load :load="load" />
		<view class="bed-order-header flexR">
			<view style="margin-right: 10rpx;">
				<u-icon name="order" size='50'></u-icon>
			</view> 
			床位预约登记
		</view>
		<view class="sawtooth bg-light">
			<image src="../../../static/images/imgs/sawtooth.png" mode=""></image>
		</view>
		<view class="reminder">
			<view class="reminder-title">
				温馨提示
			</view>
			<view class="reminder-content">
				1、必须有门诊医生开具入院证明方可进行床位预约。
			</view>
			<view class="reminder-content" style="margin: 10rpx 0;">
				2、预约提交成功后，等待医院入院通知，请保持电话畅通，医院会电话通知病人，接到通知后请患者携带有效证件和相关病历尽快到医院住院处办理登记。
			</view>
			<view class="reminder-content">
				 3、有任何疑问请电话咨询医院
			</view>
		</view>
		<view class="bed-order-detail" v-if="orderDetail.length">
			<view v-for="(item,index) in orderDetail" :key="index" class="bed-order-detail-item">
				<view class="card-row"><label>患者姓名：</label>{{item.hzxm||'测试111'}}</view>
				<view class="card-row"><label>患者性别：</label>{{item.sex||'测试111'}}</view>
				<view class="card-row"><label>身份证号：</label>{{item.sfzh||'测试111'}}</view>
				<view class="card-row"><label>房间号：</label>{{item.fjh||'测试111'}}</view>
				<view class="card-row"><label>床位代码：</label>{{item.cwdm||'测试111'}}</view>
				<view class="card-row"><label>预约日期：</label>{{item.yyrq||'测试111'}}</view>
				<view class="div-cut"></view>
			</view>
		</view>
		<view class="bed-order-list" v-if="orderInfo">
			<view class="card-row"><label>首页序号：</label>{{orderInfo.syxh||'测试111'}}</view>
			<view class="card-row"><label>病区名称：</label>{{orderInfo.bqmc||'测试111'}}</view>
			<view class="card-row"><label>科室名称：</label>{{orderInfo.ksmc||'测试111'}}</view>
			<view class="card-row" :style="{color:orderInfo.cwdmName?'':'#B5B5B5'}" @click="onClickRow('cwdm')"><label>预约床位：</label>{{orderInfo.cwdmName||'请选择需要预约的床位'}}</view>
			<view class="card-row" :style="{color:orderInfo.yyrq?'':'#B5B5B5'}" @click="onClickRow('yyrq')"><label>预约时间：</label>{{orderInfo.yyrq||'请选择需要预约的时间'}}</view>
			<view style="height: 90rpx;margin-top: 40rpx;">
				<view class="theme-light-btn" @click="submit">
					提交
				</view>
			</view>
		</view>
		<u-empty text='暂无信息' mode="list" v-if="!orderInfo&&orderDetail.length===0&&!load"></u-empty>
		<!-- 床位选择 -->
		<u-select v-model="showBed" :list="bedList" mode="mutil-column-auto" @confirm="confirm"></u-select>
		<!-- 日期选择 -->
		<!-- #ifndef MP-ALIPAY -->
		<u-picker v-model="showDate" mode="time" @confirm="confirm"></u-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import { getBedOrderDetail, poBedOrder, getBedOrderList } from '@/api/otherService.js'
	import { mapGetters } from 'vuex'
	import dayjs from 'dayjs'
	export default {
		components:{ Load },
		data() {
			return {
				load:true,
				orderDetail:[],
				orderInfo:'',
				showBed:false,
				key:'',
				bedList:[],
				showDate:false,
				defaultDate:dayjs().format('YYYY-MM-DD')
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad(op) {
			await this.$onLaunched
			this.initData()
		},
		methods: {
			initData(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				this.load = true
				let info = {
					patId:this.userInfo.patId
				}
				getBedOrderDetail(info).then(data => {
					if(data&&data.length){
						this.load = false
						this.orderDetail = data
					}else{
						getBedOrderList(info).then(res => {
							this.load = false
							if(res){
								res.yyrq = ''
								this.bedList = res.children||[]
							}
							this.orderInfo = res||''
						}).catch(e => {
							this.load = false
							this.orderInfo = ''
							this.bedList = []
						})
					}
				}).catch(e => {
					this.load = false
				})
			},
			onClickRow(key){
				this.key = key
				if(key==='cwdm'){
					this.showBed = true
				}else{
					// #ifndef MP-ALIPAY
					this.showDate = true
					// #endif
					// #ifdef MP-ALIPAY
					this.handleItemMy()
					// #endif
				}
			},
			confirm(val){
				if(this.key==='cwdm'){
					this.showBed = false
					if(val.length){
						this.orderInfo.cwdm = val[1]?val[1].value:val[0].value
						this.orderInfo.cwdmName = val[0].label + '-' + val[1].label
					}else{
						this.orderInfo.cwdm = ''
						this.orderInfo.cwdmName = ''
					}
				}else{
					this.showDate = false
					this.orderInfo[this.key] = `${val.year}-${val.month}-${val.day}`
				}
			},
			handleItemMy(){
				let _this = this;
				my.datePicker({
					currentDate: _this.defaultDate,
					startDate: dayjs().format('YYYY-MM-DD'),
				    endDate: '2045-01-01',
				    success: (res) => {
						_this.orderInfo.yyrq = res.date
						_this.defaultDate = res.date
						console.log(_this.orderInfo)
				    },
				});
			},
			submit(){
				if(!this.orderInfo.cwdmName){
					this.$u.toast('请选择预约的床位')
					return
				}
				if(!this.orderInfo.yyrq){
					this.$u.toast('请选择预约时间')
					return
				}
				let params = {
					bqdm: this.orderInfo.bqdm,
					cwdm: this.orderInfo.cwdm,
					ksdm: this.orderInfo.ksdm,
					syxh: this.orderInfo.syxh,
					yyrq: this.orderInfo.yyrq
				}
				this.load = true
				poBedOrder(params).then(data => {
					this.load = false
					this.$u.toast('预约成功')
					this.initData()
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bed-order{
		min-height: 100%;
		background-color: #fff;
		&-header{
			height: 200rpx;
			background-color: $theme-color-light;
			font-size: 50rpx;
			color: #fff;
			justify-content: center;
			align-items: center;
		}
		&-detail{
			&-item{
				>.card-row{font-size: 28rpx; padding: 10rpx 44rpx;}
			}
		}
		&-list{
			padding: 20rpx 44rpx;
			.card-row{
				font-size: 28rpx;
				>label{
					color: #191919;
				}
				color: #000000;
			}
		}
	}
</style>
